<template>
    <div>
        <BasicModal v-bind="$attrs" @register="registerModal" title="数据对比窗口" :minHeight="300" width="800px" @ok="handleSubmit">
            <a-spin :spinning="confirmLoading">
                <a-form @submit="handleSubmit" :form="form" class="form">
                    <a-row class="form-row" :gutter="24">
                        <a-col :md="12" :sm="8">
                            <a-form-item label="数据库表名" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }" name="dataTable">
                                <a-input placeholder="请输入数据库表名" v-model:value="dataTable" disabled/>
                            </a-form-item>
                        </a-col>

                        <a-col :md="12" :sm="8">
                            <a-form-item label="数据ID" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
                                <a-input placeholder="请输入数据ID" v-model:value="dataId" disabled/>
                            </a-form-item>
                        </a-col>
                    </a-row>

                    <a-row class="form-row" :gutter="24">
                        <a-col :md="12" :sm="8">
                            <a-form-item label="版本号1" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
                                <a-select placeholder="请选择版本号" @change="handleChange1" v-model:value="dataVersion1">
                                    <a-select-option v-for="(log,logindex) in dataVersionList" :key="logindex.toString()" :value="log.id">
                                        {{ log.dataVersion }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="12" :sm="8">
                            <a-form-item label="版本号2" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
                                <a-select placeholder="请选择版本号" @change="handleChange2" v-model:value="dataVersion2">
                                    <a-select-option v-for="(log,logindex) in dataVersionList" :key="logindex.toString()" :value="log.id">
                                        {{ log.dataVersion }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-spin>
        </BasicModal>
        <DataLogCompareModal @register="registerDataLogCompareModal" ></DataLogCompareModal>
    </div>
</template>
<script lang="ts" setup>
  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
  import { queryDataVerList } from './datalog.api';
  import { reactive, ref, unref } from 'vue';
  import  DataLogCompareModal from './DataLogCompareModal.vue';
  const dataId1 = ref('');
  const dataId2 = ref('');
  const dataId = ref('');
  const dataTable1 = ref('');
  const dataID3 = ref('');
  const dataTable = ref('');
  const confirmLoading = ref(false);
  const isUpdate = ref(true);
  const dataVersionList = ref([]);
  let dataLog = reactive({});
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
      let checkedRows = data.selectedRows;
      dataTable.value = checkedRows[0].dataTable;
      dataId.value = checkedRows[0].dataId;
      dataId1.value = checkedRows[0].id;
      dataId2.value = checkedRows[1].id;
      initDataVersionList();
    }
  });

  const [registerDataLogCompareModal, { openModal }] = useModal();

  function handleChange1(value) {
    dataId1.value = value;
  }

  function handleChange2(value) {
    dataId2.value = value;
  }

  function handleSubmit() {
    let result={dataId1:dataId1.value,dataId2:dataId2.value}
    openModal(true, {
      result,
      isUpdate: true,
    });
    closeModal();
  }

  function initDataVersionList() {
    queryDataVerList({ dataTable: dataTable.value, dataId: dataId.value }).then((res) => {
      dataVersionList.value = res.map((value,key,arr) => {
         arr['label']=value;
        return arr;
      })
      console.info(dataVersionList.value)
    });
  }
</script>

<style scoped lang="less">
    .detail-iframe {
        border: 0;
        width: 100%;
        height: 100%;
        min-height: 600px;
    }
</style>
